<template>
	<view class="my-icon">
		<text class="icon" :class="['my-icon-'+name]" :style="{color:color,'font-size':fontSize,'background':background}" @click="onClick()"></text>
	</view>
    
</template>

<script>
    export default {
        props: {
            /**
             * 图标类型
             */
            name: String,
            /**
             * 图标颜色
             */
            color: String,
                /**
             * 图标背景颜色
             */
            background:String,
            /**
             * 图标大小
             */
            size: {
                type: [Number, String],
                default: 24
            }
        },
        computed: {
            fontSize() {
                var size = Number(this.size)
                size = isNaN(size) ? 24 : size
                return `${size}px`
            }
        },
        methods: {
            onClick() {
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/my-icon.css";
	
	.my-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0rpx;
		margin: 0rpx;
	}
	.icon{
		margin: 0rpx;
		padding: 0rpx;
	}
</style>